<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>数据可视化</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body >
    <div style="background-color:dark-blue;">
        <!-- 图一所占空间 -->
        <div id="zr1" style="height:400px; "></div>

        <!-- 图二所占空间 -->
        <div id="zr2" style="height:400px; "></div>
		
        <div id="zr3" style="height:500px;"></div>
		<div id="zr4" style="height:500px;"></div>
	     <div id="zr5" style="height:400px;"></div>
    </div>
<!--方式一 cdn-->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<script type="text/javascript">
    window.onload = function () {
        echart01();
        echart02();
		echart03();
		echart04();
		echart05();

        function echart01() {
       var dom = document.getElementById("zr1");
var myChart = echarts.init(dom, 'dark');
var app = {};

var option;



option = {
    title: {
            text: "气温随月份的变化趋势",
            padding: 10,
            textStyle: {
                fontSize:20
            }
        },
     tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["气温"]
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                magicType: {
                    show: false,
                    type: ["line", "bar"]
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
    xAxis: {
        type: 'category',
        data: ['2011-01',
'2011-02',
'2011-03',
'2011-04',
'2011-05',
'2011-06',
'2011-07',
'2011-08',
'2011-09',
'2011-10',
'2011-11',
'2011-12',
'2012-01',
'2012-02',
'2012-03',
'2012-04',
'2012-05',
'2012-06',
'2012-07',
'2012-08',
'2012-09',
'2012-10',
'2012-11',
'2012-12']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [0.19,
0.28,
0.33,
0.47,
0.57,
0.69,
0.75,
0.70,
0.61,
0.46,
0.40,
0.32,
0.27,
0.31,
0.44,
0.46,
0.61,
0.67,
0.75,
0.71,
0.62,
0.50,
0.33,
0.32],
        type: 'line'
    }]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
		}

        function echart02() {
           var dom = document.getElementById("zr2");
var myChart = echarts.init(dom,'dark');
var app = {};

var option;



var colors = ['#5470C6', '#91CC75', '#EE6666'];

option = {
    color: colors,
title: {
            text: "不同温度下租赁人数的变化趋势",
            padding: 10,
            textStyle: {
                fontSize:20
            }
        },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        right: '20%'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['普通用户', '注册用户', '总人数']
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: ['0.02',
'0.04',
'0.06',
'0.08',
'0.1',
'0.12',
'0.14',
'0.16',
'0.18',
'0.2',
'0.22',
'0.24',
'0.26',
'0.28',
'0.3',
'0.32',
'0.34',
'0.36',
'0.38',
'0.4',
'0.42',
'0.44',
'0.46',
'0.48',
'0.5',
'0.52',
'0.54',
'0.56',
'0.58',
'0.6',
'0.62',
'0.64',
'0.66',
'0.68',
'0.7',
'0.72',
'0.74',
'0.76',
'0.78',
'0.8',
'0.82',
'0.84',
'0.86',
'0.88',
'0.9',
'0.92',
'0.94',
'0.96',
'0.98',
'1.0']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '普通用户',
            min: 0,
           
            position: 'right',
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} 人次'
            }
        },
        {
            type: 'value',
            name: '注册用户',
            min: 0,
           
            position: 'right',
            offset: 80,
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value} 人次'
            }
        },
        {
            type: 'value',
            name: '总人数',
            min: 0,
           
            position: 'left',
            axisLine: {
                show: true,
                lineStyle: {
                    color: colors[2]
                }
            },
            axisLabel: {
                formatter: '{value} 人次'
            }
        }
    ],
    series: [
        {
            name: '普通用户',
            type: 'bar',
            data: [32,
56,
88,
66,
170,
338,
672,
1604,
1026,
2884,
3796,
5998,
8752,
6204,
14258,
16734,
19476,
25542,
15802,
30728,
29234,
25906,
32370,
21774,
42804,
42172,
42468,
47826,
25326,
58884,
59218,
65516,
65572,
33172,
74174,
78314,
76786,
65350,
25732,
55440,
37606,
23034,
21112,
10384,
13608,
7492,
2040,
2126,
164,
204]
        },
        {
            name: '注册用户',
            type: 'bar',
            yAxisIndex: 1,
            data: [1392,
1084,
1256,
894,
4858,
8542,
14538,
28562,
17610,
53576,
55072,
77688,
89588,
58060,
134348,
147296,
155072,
172862,
106372,
174890,
162940,
135226,
149760,
87916,
167928,
183528,
185456,
199686,
110134,
240926,
237152,
244454,
246836,
113086,
280422,
248584,
246388,
205970,
80128,
170354,
107102,
66892,
63502,
28164,
42064,
23870,
5340,
6658,
914,
384]
        },
        {
            name: '总人数',
            type: 'line',
            yAxisIndex: 2,
            data: [1424,
1140,
1344,
960,
5028,
8880,
15210,
30166,
18636,
56460,
58868,
83686,
98340,
64264,
148606,
164030,
174548,
198404,
122174,
205618,
192174,
161132,
182130,
109690,
210732,
225700,
227924,
247512,
135460,
299810,
296370,
309970,
312408,
146258,
354596,
326898,
323174,
271320,
105860,
225794,
144708,
89926,
84614,
38548,
55672,
31362,
7380,
8784,
1078,
588]
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
    
        }
    }
	function echart03(){
	
	var dom = document.getElementById("zr3");
var myChart = echarts.init(dom,'dark');
var app = {};

var option;



setTimeout(function () {

    option = {
	title: {
            text: "不同湿度下租赁人数的变化趋势",
            padding: 10,
            textStyle: {
                fontSize:20
            }
        },
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
                ['湿度', '0.0',
'0.08',
'0.1',
'0.12',
'0.13',
'0.14',
'0.15',
'0.16',
'0.17',
'0.18',
'0.19',
'0.2',
'0.21',
'0.22',
'0.23',
'0.24',
'0.25',
'0.26',
'0.27',
'0.28',
'0.29',
'0.3',
'0.31',
'0.32',
'0.33',
'0.34',
'0.35',
'0.36',
'0.37',
'0.38',
'0.39',
'0.4',
'0.41',
'0.42',
'0.43',
'0.44',
'0.45',
'0.46',
'0.47',
'0.48',
'0.49',
'0.5',
'0.51',
'0.52',
'0.53',
'0.54',
'0.55',
'0.56',
'0.57',
'0.58',
'0.59',
'0.6',
'0.61',
'0.62',
'0.63',
'0.64',
'0.65',
'0.66',
'0.67',
'0.68',
'0.69',
'0.7',
'0.71',
'0.72',
'0.73',
'0.74',
'0.75',
'0.76',
'0.77',
'0.78',
'0.79',
'0.8',
'0.81',
'0.82',
'0.83',
'0.84',
'0.85',
'0.86',
'0.87',
'0.88',
'0.89',
'0.9',
'0.91',
'0.92',
'0.93',
'0.94',
'0.96',
'0.97',
'1.0'],
                ['普通用户',92,
32,
38,
12,
6,
20,
232,
1296,
1438,
1692,
3636,
2504,
2754,
4268,
6290,
8214,
6364,
8200,
11246,
10576,
14406,
18462,
16282,
11536,
21236,
18192,
21776,
29422,
31242,
22850,
27898,
24998,
32726,
26366,
30012,
21776,
27484,
33152,
19010,
24272,
26742,
18964,
23678,
27314,
20844,
24894,
38634,
16888,
15800,
26772,
17654,
12828,
21842,
30328,
10288,
14854,
24342,
31642,
8260,
10660,
20142,
26210,
7216,
10658,
20426,
27126,
3418,
7092,
14296,
19366,
14522,
850,
6326,
9438,
27440,
5380,
164,
368,
8382,
19786,
8276,
262,
14,
18,
2816,
11504,
16,
36,
3250],
                ['注册用户', 1154,
122,
176,
46,
28,
56,
352,
3536,
5370,
4910,
5154,
11028,
10818,
13776,
21756,
29200,
24280,
36728,
38866,
40190,
47936,
49522,
54026,
45366,
66132,
64458,
70764,
81554,
96382,
82698,
91972,
91050,
109120,
91760,
115952,
75508,
96416,
125354,
77682,
92246,
116812,
91646,
97604,
105316,
96298,
103956,
133778,
82510,
82328,
100578,
79232,
79740,
108284,
121922,
45780,
68972,
111466,
122198,
44956,
54362,
98618,
117912,
49754,
54026,
101142,
109850,
35850,
46804,
94496,
91104,
62342,
14630,
53028,
68112,
159090,
25550,
1662,
8884,
75748,
131422,
52078,
1990,
224,
286,
41128,
93698,
734,
92,
33888],
                ['总人数', 1246,
154,
214,
58,
34,
76,
584,
4832,
6808,
6602,
8790,
13532,
13572,
18044,
28046,
37414,
30644,
44928,
50112,
50766,
62342,
67984,
70308,
56902,
87368,
82650,
92540,
110976,
127624,
105548,
119870,
116048,
141846,
118126,
145964,
97284,
123900,
158506,
96692,
116518,
143554,
110610,
121282,
132630,
117142,
128850,
172412,
99398,
98128,
127350,
96886,
92568,
130126,
152250,
56068,
83826,
135808,
153840,
53216,
65022,
118760,
144122,
56970,
64684,
121568,
136976,
39268,
53896,
108792,
110470,
76864,
15480,
59354,
77550,
186530,
30930,
1826,
9252,
84130,
151208,
60354,
2252,
238,
304,
43944,
105202,
750,
128,
37138]
               
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {focus: 'data'},
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: '湿度',
                    value: '2012',
                    tooltip: '2012'
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    myChart.setOption(option);

});

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

	}
	function echart04(){
	var dom = document.getElementById("zr5");
var myChart = echarts.init(dom,'dark');
var app = {};

var option;



option = {
    title: {
        text: '租车数量排名前十的时间点',
        subtext: '子查询'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['17:00',
'18:00',
'8:00',
'19:00',
'16:00',
'13:00',
'12:00',
'15:00',
'14:00',
'20:00']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [461,
425,
359,
311,
311,
253,
253,
251,
240,
226]
        }
      
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
	}
	function echart05(){
	var dom = document.getElementById("zr4");
var myChart = echarts.init(dom,'dark');
var app = {};

var option;



option = {
title: {
            text: "工作日平均每小时的租赁情况",
            padding: 10,
            textStyle: {
                fontSize:20
            }
        },
		tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["气温"]
        },
		 toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                magicType: {
                    show: false,
                    type: ["line", "bar"]
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
    angleAxis: {
        type: 'category',
        data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点']
    },
    radiusAxis: {
    },
    polar: {
    },
    series: [{
        type: 'bar',
        data: [16,12,10,6,2,1,3,8,20,45,79,106,126,136,139,136,128,111,84,65,46,36,28,19],
        coordinateSystem: 'polar',
        name: '普通用户',
        stack: 'a',
        emphasis: {
            focus: 'series'
        }
    }, {
        type: 'bar',
        data: [74,57,42,19,6,6,14,34,85,126,176,208,240,236,225,222,224,211,196,166,127,105,88,66],
        coordinateSystem: 'polar',
        name: '会员用户',
        stack: 'a',
        emphasis: {
            focus: 'series'
        }
    }, {
        type: 'bar',
        data: [90,69,53,25,8,8,18,43,105,171,255,315,366,372,364,358,352,323,281,231,174,142,116,85],
        coordinateSystem: 'polar',
        name: '总人数',
        stack: 'a',
        emphasis: {
            focus: 'series'
        }
    }],
    legend: {
        show: true,
        data: ['普通用户', '会员用户', '总人数']
    }
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

	}
</script>
</body>
</html>
